<!DOCTYPE html>
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0">
  <title>loading sheets in elements defined in main document</title>
  <script src="../../../../webcomponentsjs/webcomponents.js"></script>
  <link rel="import" href="../../../polymer.html">
  <script src="../../../../tools/test/htmltest.js"></script>
  <script src="../../../../tools/test/chai/chai.js"></script>
  <link rel="import" href="x-sheet-main-doc.html">
</head>
<body>
  <x-sheet-main-doc></x-sheet-main-doc>
  <div class="red1">red</div>
  <script>
    document.addEventListener('polymer-ready', function() {
      var foo = document.querySelector('x-sheet-main-doc');
      var color = 'rgb(255, 0, 0)';
      chai.assert.equal(getComputedStyle(foo.$.div).backgroundColor, color,
        'computed color matches expected color');

      var outerDiv = document.querySelector('.red1');
      chai.assert.equal(getComputedStyle(outerDiv).backgroundColor, color,
        'computed color matches expected color');  
      done();
    });
  </script>
</body>
</html>
